<!--模板 html-->
<template>
  <div>
    <!-- 按钮 -->
    <!-- @click="toFormHandler"：跳转到表单的处理器，toFormHandler是一个方法 -->
    <div class="btns">
      <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>
    </div>
    <!-- 表格 -->
    <div class="tab_content">
      <el-table :data="baseroles" style="width: 100%" size="small">
        <el-table-column prop="id" label="编号" width="180"> </el-table-column>
        <el-table-column prop="name" label="用户类型" width="180"> </el-table-column>
        <!-- 操作列 -->
        <el-table-column width="100" align="center" label="操作">
            <!-- slot-scope="scope"：作用域插槽 -->
            <template slot-scope="scope">
                <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
                <!-- scope.row：当前行数据 -->
                <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<!-- 脚本 js -->
<script>
import { del, get } from '@/utils/request'
export default {
    // 定义变量，在模板中直接使用
    data(){ 
        return {
            baseroles:[],
            visible:false
        }
    },
    // 定义事件处理函数（方法）
    methods:{
        // 删除的处理函数
        deleteHandler(row){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 当用户点击了确定才会执行
              let url = "http://localhost:8888/baserole/deleteById"
              // {id:row.id}是一个对象get、post、delete的三个方法在传参的时候只能传对象
              // 记得导入import { del, get } from '@/utils/request'
              del(url,{id:row.id}).then(resp =>{
                  // 提示
                  this.$message({type:"success",message:resp.message});
                  // 更新页面
                  this.loadBaseroles();
                })
              })
        },
        // 修改的处理函数
        editHandler(row){
          // 跳转到表单。$router：vue的一个模块；push：推动；
          // {}内为一个对象,里面有两个元素，path为form表单路由的路径（子路由+父路由），
          // query为前端传递进来的参数
          this.$router.push({
              path:"/lpa/baserole_form",
              query:row
          })
        },
        // 跳转到基本角色添加页面
        toFormHandler(){
            // 跳转到表单。$router：vue的一个模块；push：推动；
            // {}内为一个对象,里面有两个元素，path为form表单路由的路径（子路由+父路由），
            // query为传递的参数（因为我们新增的时候不需要传参，所以我们可不写）
            this.$router.push({
                path:"/lpa/baserole_form",
                // query:
            })
        },
        // 查询所有的基本角色数据
        loadBaseroles(){
            let url = "http://localhost:8888/baserole/query"
            // get方法从import { get } from '@/utils/request'获得
            get(url).then(resp=>{
                // 获得前端请求数据之后做的事情
                // 获取后端数据
                this.baseroles = resp.data;
            })
        }
    },
    // 生命周期钩子函数
    created(){
        // loadBaseroles()函数默认不会自动执行，所以我们在这里加载使其执行
        // 做了这一步才能从数据库拿到数据this.baseroles = resp.data
        // 页面加载出来的时候，拿到路由中的参数，放到this.form中
        this.loadBaseroles();
    }
}
</script>
<!-- 样式 css -->
// sass：css的一个脚本化语言，能帮我们产生css
<style lang="sass" scoped>

</style>
